<template>
    <div class="re">
        <div class="rebox">
            <el-steps :active="active-1" finish-status="success">
                <el-step  title="身份验证"></el-step>
                <el-step  title="重置密码"></el-step>
                <el-step  title="重置成功"></el-step>
            </el-steps>
            <!-- 第一页 -->
            <div class="no1" v-if="active == 1">
                <el-input type="text"
                    placeholder="请输入手机号"
                    v-model="input1"
                >
                </el-input>
                <el-input type="text"
                    placeholder="请输入验证码"
                    v-model="input2"
                    clearable
                >
                </el-input>
                <div class="btn1">
                <el-button style="margin-top:20px">获取</el-button>
                <el-button style="margin-top:20px" @click="next()" >下一步</el-button>
                </div>
            </div>
            <!-- 第二页 -->
            <div class="no1" v-if="active == 2">
                
                 <el-input type="text"
                    placeholder="请输入密码"
                    v-model="input3"
                    clearable
                >
                </el-input>
                 <el-input type="text"
                    placeholder="确认密码"
                    v-model="input4"
                    clearable
                >
                </el-input>
                <el-button style="margin-top:20px" @click="next()" class="btn1">下一步</el-button>
            </div>
            <!-- 第三页 -->
            <div class="no1" v-if="active == 3">
                <img src="../assets/img/success.png" alt="">
                <el-button style="margin-top:20px" class="ebtn2" > <router-link ></router-link> 返回登录页</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active:1,
            input1:'',
            input2:'',
            input3:'',
            input4:''
        }
    },
    methods: {
        next(){
            if(this.active++ > 2){
                this.active = 0;
            }
        }
    },
}
</script>
<style lang="scss" scoped>
    .re{
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-repeat:repeat;
        display: flex;
        justify-content: center;
        background-image: url(../assets/img/ui.png);
    } 
    .rebox{
        margin-top: 150px;
        .el-steps{
            width: 500px;
            margin-left: 60px;
        }
        
    } 
    .no1{
        margin-top: 30px;
        height: 600px;
        padding-left:25%;
        padding-right:25%;
        .el-input{
            margin: 20px 0px;
        }
        img{
            margin-left: 60px;
        }
        .btn1{
            display: flex;
            justify-content: space-between;
        }
    }
    .ebtn2{
        margin-left: 100px;
    }
</style>